<template>
	<div class="operMenu">
		<el-table :data="menuList" style="width: 680px">
			<el-table-column fixed prop="typeId" label="菜单ID" width="100" align="center">
			</el-table-column>

			<el-table-column prop="typeName" label="菜单名" width="150" align="center">
			</el-table-column>

      <el-table-column prop="usedCount" label="视频引用数量" width="150" align="center">
      </el-table-column>

			<el-table-column align="center">
				<template slot-scope="scope">
					<el-button class="tableButton" @click="openUpdateForm(scope.row)" type="success" size="small">编辑
					</el-button>
					<el-button class="tableButton" @click="handleDelete(scope.row.typeId)" type="danger" size="small">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 编辑菜单 -->
		<el-dialog title="编辑菜单" :visible.sync="dialogFormVisible">

			<el-form ref="updateForm" :model="updateForm" :rules="rules" label-width="70px">
				<el-form-item label="菜单名" prop="menu_name">
					<el-input prefix-icon="el-icon-user-solid" type="text" maxlength="13" placeholder="请输入菜单名"
						v-model="updateForm.menu_name" />
				</el-form-item>

				<el-form-item>
					<el-button :loading="loading" type="success" v-on:click="onSubmit('updateForm')">
						<span v-if="!loading">修 改</span>
						<span v-else>修 改 中...</span>
					</el-button>
				</el-form-item>
			</el-form>


		</el-dialog>
	</div>
</template>

<script>
import { Message } from "element-ui";
import { getMenuList, updateMenu, deleteMenu } from "@/api/menu";

export default {
  name: "operMenu",

  data() {
    return {
      menuList: null,
      dialogFormVisible: false,
      total: 0,

      updateForm: {
        mid: "",
        menu_name: "",
      },

      rules: {
        menu_name: [
          {
            required: true,
            message: "菜单名不可为空",
            trigger: "blur",
          },
        ],
      },
      loading: false,
    };
  },

  created() {
    this.getMenuList();
  },

  methods: {
    getMenuList() {
      getMenuList(this.queryParams).then((res) => {
        this.menuList = res.data;
      });
    },

    openUpdateForm(data) {
      this.dialogFormVisible = true;
      this.updateForm.mid = data.mid;
      this.updateForm.menu_name = data.menu_name;
    },

    onSubmit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          updateMenu(this.updateForm).then((res) => {
            Message.success("修改成功");
            this.loading = false;
            this.dialogFormVisible = false;
            this.getMenuList();
          });
        } else {
          this.loading = false;
          return false;
        }
      });
    },

    handleDelete(mid) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteMenu(mid).then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getMenuList();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tableButton {
  margin-right: 40px;
}
</style>
